<template>
  <div>
    <div style="margin-bottom: 20px">
      <el-button @click="fullAdd" type="primary"><i class="el-icon-plus"></i>满赠</el-button>
    </div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="分公司">
        <el-input v-model="this.branchName" disabled></el-input>
      </el-form-item>
      <!--<el-form-item label="所属部门">-->
        <!--<el-input v-model="this.orgName" disabled></el-input>-->
      <!--</el-form-item>-->
      <el-form-item label="客资类型">
        <el-select v-model="formInline.limit_user_type" style="width:150px">
          <el-option
            v-for="item in clientList"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动状态" style="margin-right:43px">
        <el-select v-model="formInline.check_status" @change="pageChange" filterable clearable style="width:230px">
          <el-option label="草稿" value="1"></el-option>
          <el-option label="待审核" value="2"></el-option>
          <el-option label="审核中" value="3"></el-option>
          <el-option label="审核不通过" value="4"></el-option>
          <el-option label="未开始" value="5"></el-option>
          <el-option label="进行中" value="6"></el-option>
          <el-option label="已结束" value="7"></el-option>
          <el-option label="已作废" value="99"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="活动ID">
        <el-input v-model="formInline.promotion_id"></el-input>
      </el-form-item>
      <el-form-item label="ERP活动ID">
        <el-input v-model="formInline.packageId"></el-input>
      </el-form-item>
      <el-form-item label="活动名称">
        <el-input v-model="formInline.promotion_name"></el-input>
      </el-form-item>
      <el-form-item label="活动周期">
        <el-date-picker
          v-model="formInline.time"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="timeChange"
          placeholder="起止时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="checkColumn = true">导出</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      v-loading="isLoading"
      max-height="800"
      style="width: 100%"
      border>
      <el-table-column
        prop="id"
        label="ID"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="branchName"
        show-overflow-tooltip
        label="分公司"
        align="center"
        width="140">
      </el-table-column>
      <!--<el-table-column-->
        <!--prop="departName"-->
        <!--label="所属部门"-->
        <!--align="center"-->
        <!--width="140">-->
      <!--</el-table-column>-->
      <!--<el-table-column-->
        <!--prop="limitStoreName"-->
        <!--label="仓库"-->
        <!--align="center"-->
        <!--width="80">-->
      <!--</el-table-column>-->
      <el-table-column
        show-overflow-tooltip
        prop="customerName"
        label="客资类型"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="promotion_id"
        label="活动ID"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="packageId"
        label="ERP活动ID"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        prop="promotion_name"
        label="活动名称"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        label="满赠类型"
        align="center"
        width="80">
        <template scope="scope">
          <span v-if="scope.row.limit_type === '1'">阶梯</span>
          <span v-if="scope.row.limit_type === '2'">每满</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="product_count.main_product_count"
        label="主商品数"
        align="center"
        width="80">
      </el-table-column>
      <el-table-column
        prop="start_time"
        label="开始时间"
        show-overflow-tooltip
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="end_time"
        label="结束时间"
        show-overflow-tooltip
        align="center"
        width="180">
      </el-table-column>
      <el-table-column
        prop="updateUser"
        label="申请人"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="updateTime"
        label="申请时间"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="150"
        align="center">
      </el-table-column>
      <el-table-column
        label="活动状态"
        prop="stateName"
        align="center"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="230" >
        <template scope="scope">
          <el-button v-if="scope.row.stateName !== '草稿'" @click="handle(scope.$index, scope.row, $event)" size="small">详情</el-button>
          <el-button v-if="scope.row.stateName === '进行中' || scope.row.stateName === '未开始'" @click="handle(scope.$index, scope.row, $event)" size="small">作废</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '审核不通过'"  @click="handle(scope.$index, scope.row, $event)" size="small">编辑</el-button>
          <el-button v-if="scope.row.stateName === '草稿' || scope.row.stateName === '审核不通过'" @click="handle(scope.$index, scope.row, $event)" size="small">删除</el-button>
          <el-button v-if="scope.row.stateName === '待审核'" @click="handle(scope.$index, scope.row, $event)" size="small">撤回</el-button>
          <el-button v-if="scope.row.stateName !== '草稿'" @click="handle(scope.$index, scope.row, $event)" size="small">复制</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="Number(pageData.pageSize)"
      layout="total, prev, pager, next"
      :total="Number(total)"
      style="padding-top:10px;text-align: right;">
    </el-pagination>
    <el-dialog title="导出字段筛选" size="small" :visible.sync="checkColumn">
      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
      <div style="margin: 15px 0;"></div>
      <el-checkbox-group v-model="checkedOptions" @change="handleCheckedCitiesChange">
        <el-checkbox
          v-for="item in Options"
          :label="item.name">
          {{item.text}}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportFile">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { apiHost, apiURL } from '../../../../../config/settings.js'
  import { getInfo, activity } from '../../../../../config/proxy.js'
  import mixins from '../../../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        checkAll: false,
        isIndeterminate: true,
        checkedOptions: [],   // 选中的
        Options: [],          // 选项集合
        checkColumn: false,   // 导出字段筛选弹窗
        checkedShow: [],      // 全选展示
        clientList: [],
        formInline: {
          limit_user_type: '',
          check_status: '',
          promotion_name: '',
          promotion_id: '',
          start_time: '',
          packageId: '',
          end_time: '',
          time: '',
          promotion_type: 5,
          product_type: ''
        },
        tableData: [],
        isLoading: false,
        total: '',
        pageData: {
          pageSize: 10,
          page: 1
        }
      }
    },
    methods: {
      handleCheckAllChange (val) {
        this.checkedOptions = val ? this.checkedShow : []
        this.isIndeterminate = false
      }, // 全选
      handleCheckedCitiesChange (value) {
        let checkedCount = value.length
        this.checkAll = checkedCount === this.Options.length
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.Options.length
      }, // 单选
      exportFile () { // 导出
        if (this.checkedOptions.length === 0) {
          this.$message({
            type: 'error',
            message: '请勾选要导出的项'
          })
          return false
        }
        this.formInline.limit_branch_id = this.branchId
        this.formInline.newbranchId = this.bid
        this.formInline.page = this.pageData.page
        this.formInline.pageSize = this.pageData.pageSize
        this.formInline.reqColumnName = this.checkedOptions
        var _data = this.formInline
        var form = document.createElement('form')
        document.body.appendChild(form)
        form.method = 'post'
        form.action = 'http://' + apiHost.newCms + ':20000' + apiURL.sphd_export
        // console.log(params.length)
        for (var i in _data) {
          var newInput = document.createElement('input')
          newInput.setAttribute('name', i)
          newInput.setAttribute('type', 'hidden')
          newInput.setAttribute('value', _data[i])
          form.appendChild(newInput)
        }
        form.submit()
        form.remove()
      },
      pageChange () {
        this.pageData.page = 1
      },
      timeChange (val) {
        if (val) {
          this.formInline.start_time = val[0]
          this.formInline.end_time = val[1]
        } else {
          this.formInline.start_time = ''
          this.formInline.end_time = ''
        }
      }, // 时间变化
      fullAdd () {
        this.openNewWindow('manzeng_add', '新增满赠', 'manzeng_add')
      },       // 新增窗口
      onSubmit () {
        this.isLoading = true
//        this.formInline.limit_branch_id = 4
        this.formInline.limit_branch_id = this.branchId
        this.formInline.limit_department = ''
        this.formInline.newbranchId = this.bid
        this.formInline.sortType = 2
        this.formInline.orderBy = 2
        const _data = Object.assign(this.formInline, this.pageData)
        activity.sphd.list(_data, (res) => {
          console.log(res, '满赠列表数据')
          if (res.message === 'ok') {
            this.isLoading = false
            this.tableData = res.content.list
            this.matchState(this.tableData)
            this.total = res.content.count
          } else {
            this.$message({
              showClose: true,
              message: res.message,
              type: 'error'
            })
          }
        })
      },      // 查询
      handleCurrentChange (val) {
        this.pageData.page = val
        this.onSubmit()
      }, // 分页
      handle (index, row, event) {
        this.rowId = row.id
        this.index = index
        const handleName = event.target.innerText
        switch (handleName) {
          case '详情':
            this.openNewWindow('manzeng_detail', '满赠详情', 'manzeng_detail', row)
            break
          case '作废':
            this.$confirm('您确定要结束此活动?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const offData = {
                id: row.id,
                status: 99,
                userId: this.userId,
                userName: this.userName,
                promotionType: 4
              }
              activity.sphd.handle(offData, (res) => {
                if (res.message === 'ok') {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '作废失败'
                  })
                }
              })
            }).catch(() => {
            })
            break
          case '撤回':
            this.$confirm('您确定要撤回此活动?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const offData = {
                id: row.id,
                status: 1,
                userId: this.userId,
                userName: this.userName,
                promotionType: 5
              }
              activity.sphd.handle(offData, (res) => {
                if (res.message === 'ok') {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '撤回失败'
                  })
                }
              })
            }).catch(() => {
            })
            break
          case '删除':
            this.$confirm('您确定要删除此活动？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const Data = {
                id: row.id,
                status: 100,
                userId: this.userId,
                userName: this.userName,
                promotionType: 5
              }
              activity.sphd.handle(Data, (res) => {
                if (res.message === 'ok') {
                  this.onSubmit()
                  this.$message({
                    type: 'success',
                    message: 'ok'
                  })
                } else {
                  this.$message({
                    type: 'error',
                    message: '删除失败'
                  })
                }
              })
            }).catch(() => {
            })
            break
          case '编辑':
            this.openNewWindow('manzeng_bj', '编辑满赠', 'manzeng_add', row)
            break
          case '复制':
            this.openNewWindow('manzeng_fz', '复制满赠', 'manzeng_add', row)
            break
        }
      },  // 按钮公共方法
      matchState (res) {
        if (res) {
          for (var i = 0; i < res.length; i++) {
            if (res[i].status === 1) { res[i].stateName = '草稿' }
            if (res[i].status === 2) { res[i].stateName = '待审核' }
            if (res[i].status === 3) { res[i].stateName = '审核中' }
            if (res[i].status === 4) { res[i].stateName = '审核不通过' }
            if (res[i].status === 5) { res[i].stateName = '未开始' }
            if (res[i].status === 6) { res[i].stateName = '进行中' }
            if (res[i].status === 7) { res[i].stateName = '已结束' }
            if (res[i].status === 99) { res[i].stateName = '已作废' }
          }
        }
      }   // 映射
    },
    computed: {
      userName: function (state) {
        return this.$store.state.user.info.user_name
      },
      userId: function (state) {
        return this.$store.state.user.info.user_id
      },
      orgName: function (state) {
        return this.$store.state.user.info.parOrgName
      },
      orgId: function (state) {
        return this.$store.state.user.info.or_org_id
      },
      roleId: function (state) {
        return Number(this.$store.state.user.info.roleid)
      },
      branchName: function (state) {
        return this.$store.state.user.info.branchId === 1 ? '总公司' : this.$store.state.user.info.branchName
      },
      branchId: function (state) {
        return this.$store.state.user.info.branchId
      },
      bid: function (state) {
        return this.$store.state.user.info.branchOrgId
      },
      update_state: function () {
        return this.$store.state.updateState.xinmanzengState
      }
    },
    watch: {
      update_state (curVal, oldVal) {  // 监听 更新状态 查询list
        this.onSubmit()
      }
    },
    created () {
      getInfo.client({}, (res) => {
        if (res.message === 'ok') {
          this.clientList = res.content.content
        }
      }) // 客资
      getInfo.getColumns({promotion_type: 5}, res => {
        this.Options = res.content
        this.Options.forEach(item => {
          this.checkedShow.push(item.name)
        })
      })
      this.onSubmit()
    }
  }
</script>
<style>
  @media screen and (min-width:1000px) {
    .supplier-form{
      max-width: 600px;
    }
  }
  .el-form--inline div {
    display: inline-block;
    float: left;
  }
  .el-dialog__body {
    padding-top: 0;
  }
  .shuoming {
    line-height: 2;
    font-size: 16px;
    font-weight: 700;
    color: #1f2d3d;
  }
</style>
